<template>
    <div class="all">
        <div class="titleStyle">
            {{ title }}
        </div>
        <div style="height: 450px; overflow: auto;">
            <div class="bodyStyle">
                <div style="width: 100%;">
                    <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px" label-position="top">
                        <div class="headrStyle">
                            <div class="divStyle">基础信息</div>
                        </div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="总提（运）单号" prop="oddNumber" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.oddNumber"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="运输条款代码" prop="carriageCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.carriageCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="货物海关状态代码" prop="statusCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.statusCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="运费支付方法" prop="payMethod" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.payMethod" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="货物总件数" prop="totalNumber" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.totalNumber" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="包装种类代码" prop="packageCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.packageCode"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="货物总毛重（单位：千克）" prop="packageWeight" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.packageWeight"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="危险品联系人名称" prop="dangerousContactName" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.dangerousContactName"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="危险品联系人通讯方式类别" prop="dangerousContactType" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.dangerousContactType"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="危险品联系人通讯方式号码" prop="dangerousContactPhone" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.dangerousContactPhone"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="headrStyle">
                            <div class="divStyle">流转信息</div>
                        </div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="装货地代码" prop="loadingCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.loadingCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="货物装载运输工具时间" prop="loadingTime" class="dateStyle">
                                    <el-date-picker v-model="addForm.loadingTime" type="date" placeholder="选择日期"
                                        style="width: 100%;" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="卸货地代码" prop="landingCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.landingCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="收货地点代码" prop="receiptLocationCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.receiptLocationCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="收货地点名称" prop="receiptLocationName" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.receiptLocationName" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="中转地点代码" prop="transitPointCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.transitPointCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="中转目的地代码" prop="transitDestinationCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.transitDestinationCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="货物托运的地点或者国家代码" prop="countryCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.countryCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="6">
                                <el-form-item label="到达卸货地日期" prop="arrivalDateTime" class="dateStyle">
                                    <el-date-picker v-model="addForm.arrivalDateTime" type="date" placeholder="选择日期"
                                        style="width: 100%;" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                        <div class="headrStyle">
                            <div class="divStyle">收货人信息</div>
                        </div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="收货人名称" prop="consigneeName" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeName" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="6">
                                <el-form-item label="收货人详细地址（街道,邮箱）" prop="consigneeAddress" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeAddress" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="6">
                                <el-form-item label="收货人国家代码" prop="consigneeCountryCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCountryCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="收货人AEO企业编码" prop="consigneeEnterpriseCode " class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeEnterpriseCode " size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="收货人通讯方式类别1" prop="consigneeCommunicationMethod1" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCommunicationMethod1" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="收货人通讯方式号码1" prop="consigneeCommunicationPhone1" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCommunicationPhone1" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="收货人通讯方式类别2" prop="consigneeCommunicationMethod2" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCommunicationMethod2" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="收货人通讯方式号码2" prop="consigneeCommunicationPhone2" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCommunicationPhone2" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="收货人通讯方式类别3" prop="consigneeCommunicationMethod3" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCommunicationMethod3" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="收货人通讯方式号码3" prop="consigneeCommunicationPhone3" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.consigneeCommunicationPhone3" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="headrStyle">
                            <div class="divStyle">发货人信息</div>
                        </div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="发货人名称" prop="shipperName" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.shipperName" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="6">
                                <el-form-item label="发货人详细地址（街道,邮箱）" prop="shipperAddress" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.shipperAddress" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="6">
                                <el-form-item label="发货人国家代码" prop="shipperCountryCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.shipperCountryCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="发货人AEO企业编码" prop="shipperEnterpriseCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.shipperEnterpriseCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="发货人通讯方式类别" prop="shipperCommunicationMethod" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.shipperCommunicationMethod" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="发货人通讯方式号码" prop="shipperCommunicationPhone" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.shipperCommunicationPhone" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="headrStyle">
                            <div class="divStyle">通知人信息</div>
                        </div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="通知人名称" prop="notifierName" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierName" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="6">
                                <el-form-item label="通知人详细地址（街道,邮箱）" prop="notifierAddress" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierAddress" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="6">
                                <el-form-item label="通知人国家代码" prop="notifierCountryCode" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCountryCode" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="通知人通讯方式类别1" prop="notifierCommunicationMethod1" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCommunicationMethod1" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="通知人通讯方式号码1" prop="notifierCommunicationPhone1" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCommunicationPhone1" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="通知人通讯方式类别2" prop="notifierCommunicationMethod2" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCommunicationMethod2" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="通知人通讯方式号码2" prop="notifierCommunicationPhone2" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCommunicationPhone2" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="通知人通讯方式类别3" prop="notifierCommunicationMethod3" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCommunicationMethod3" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="通知人通讯方式号码3" prop="notifierCommunicationPhone3" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.notifierCommunicationPhone3" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>

        </div>
        <div class="footerStyle">
            <!-- <el-button size="mini">取 消</el-button> -->
            <el-button type="primary" size="mini" class="buttonStyle" @click="onSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        title: {
            type: String,
            default: ""
        },
        currentRow: {
            type: Object,
            default: {}
        },
        closePage: {
            type: Function,
        },
    },
    data() {
        return {
            addForm: {
                oddNumber: "",
                carriageCode: "",
                statusCode: "",
                payMethod: "",
                totalNumber: "",
                packageCode: "",
                packageWeight: "",
                dangerousContactName: "",
                dangerousContactType: "",
                loadingCode: "",
                loadingTime: "",
                landingCode: "",
                receiptLocationCode: "",
                receiptLocationName: "",
                transitPointCode: "",
                transitDestinationCode: "",
                countryCode: "",
                // arrivalDateTime: "",
                consigneeName: "",
                consigneeAddress: "",
                consigneeCountryCode: "",
                consigneeEnterpriseCode: "",
                consigneeCommunicationMethod1: "",
                consigneeCommunicationPhone1: "",
                consigneeCommunicationMethod2: "",
                consigneeCommunicationPhone2: "",
                consigneeCommunicationMethod3: "",
                consigneeCommunicationPhone3: "",
                shipperName: "",
                shipperAddress: "",
                shipperCountryCode: "",
                shipperEnterpriseCode: "",
                shipperCommunicationMethod: "",
                shipperCommunicationPhone: "",
                notifierName: "",
                notifierAddress: "",
                notifierCountryCode: "",
                notifierCommunicationMethod1: "",
                notifierCommunicationPhone1: "",
                notifierCommunicationMethod2: "",
                notifierCommunicationPhone2: "",
                notifierCommunicationMethod3: "",
                notifierCommunicationPhone3: "",
            },
            rules: {
                oddNumber: [
                    { required: true, message: '请输入总提（运）单号', trigger: 'change,blur' },
                ],
                payMethod: [
                    { required: true, message: '请输入运费支付方法', trigger: 'change,blur' },
                ],
                totalNumber: [
                    { required: true, message: '请输入货物总件数', trigger: 'change,blur' },
                ],
                packageCode: [
                    { required: true, message: '请输入包装种类代码', trigger: 'change,blur' },
                ],
                packageWeight: [
                    { required: true, message: '请输入货物总毛重', trigger: 'change,blur' },
                ],
                loadingCode: [
                    { required: true, message: '请输入装货地代码', trigger: 'change,blur' },
                ],
                loadingTime: [
                    { required: true, message: '请选择货物装载运输工具时间', trigger: 'change,blur' },
                ],
                landingCode: [
                    { required: true, message: '请输入卸货地代码', trigger: 'change,blur' },
                ],
                countryCode: [
                    { required: true, message: '请输入货物托运的地点或者国家代码', trigger: 'change,blur' },
                ],
                // arrivalDateTime: [
                //     { required: true, message: '请选择到达卸货地日期', trigger: 'change,blur' },
                // ],
                shipperName: [
                    { required: true, message: '请输入发货人名称', trigger: 'change,blur' },
                ],
                shipperAddress: [
                    { required: true, message: '请输入发货人详细地址（街道,邮箱）', trigger: 'change,blur' },
                ],
                notifierName: [
                    { required: true, message: '请输入通知人名称', trigger: 'change,blur' },
                ],
                notifierAddress: [
                    { required: true, message: '请输入通知人详细地址（街道,邮箱）', trigger: 'change,blur' },
                ],
                
               
                
            },
        }
    },
    mounted() {
        if (this.title == '编辑') {
            this.addForm = { ...this.currentRow }
        }
    },
    methods: {
        onSubmit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let item = { ...this.addForm }
                    let type = this.title
                    this.closePage(type, item)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
    },
}
</script>
<style lang='less' scoped>
.all {
    .titleStyle {
        // position: relative;
        // top: -38px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        height: 40px;
        color: #333333;
    }

    .headrStyle {
        height: 30px;

        .divStyle {
            color: #121e2f;
            padding: 5px;
            border-left: 6px solid #245aa1;
            padding-left: 10px;
            // font-size: 14px;
            // font-weight: bold;



            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 14px;
            color: #333333;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .bodyStyle {
        margin-top: 0%;

        .formStyle {
            // margin-right: 50px;
            width: 80%;

            /deep/ .el-input__inner {
                border-top: none;
                border-left: none;
                border-right: none;
                border-radius: 0;
                // padding: 0;
            }
        }

        .dateStyle {
            /deep/ .el-input__inner {
                border-top: none;
                border-left: none;
                border-right: none;
                border-radius: 0;
                width: 80%;
                height: 30px;
            }
        }

        /deep/ .el-form-item__label {
            color: #333333;
        }
    }

    .footerStyle {
        display: flex;
        justify-content: space-around;
        margin-top: 5px;

        .buttonStyle {
            background-color: #0F47B8;
        }
    }
}
</style>